/**
 * 夜班限时签到历史列表
 * @author levy
 */
(function( lf, r) {
    var ajax = lf.utils.ajax,
        log = lf.utils.log,
        RC = r.createClass;


    var Header = RC({
        render: function () {
            return (
                <div className="flex-box-row header">
                    <span className="flex-item">日期</span>
                    <span className="flex-item">日间</span>
                    <span className="flex-item">状态</span>
                    <span className="flex-item">类型</span>
                </div>
            );
        }
    });
    var History = RC({
        render: function () {
            var data = this.props.data;

            return (
                <li className="flex-box-row normal-li">
                    <span>{data.date}</span>
                    <div>
                        <span>{data.time1}</span>
                        <span>{data.time2}</span>
                    </div>
                    <div>
                        <span className={data.status1 === '已签到' ? 'signed' : 'missed'}>
                            {data.status1}
                        </span>
                        <span className={data.status2 === '已签到' ? 'signed' : 'missed'}>
                            {data.status2}
                        </span>
                    </div>
                    <span>{data.type}</span>
                </li>
            );
        }
    });
    var HistoryList = RC({
        getInitialState: function () {
            return ({
                mock:[
                    {
                        date:'09-12',
                        time1:'01:01:00',
                        time2:'03:01:00',
                        status1:'已签到',
                        status2:'已签到',
                        type:'夜班',
                    },
                    {
                        date:'09-13',
                        time1:'02:01:00',
                        time2:'04:01:00',
                        status1:'已错过',
                        status2:'已错过',
                        type:'夜班',
                    }
                ],
                historyList:[],
            });
        },
        componentWillMount: function () {

        },
        render: function () {
            var list = this.state.historyList;
            if(!list.length){
                list = this.state.mock.map(function (data) {
                    return <History data={data}/>
                });
            }

            return (
                <ul className="mui-table-view lf-list history-list">
                    {list}
                </ul>
            );
        }
    });

    var Content = RC({
        render: function () {
            return (
                <div className="sign-in-list">
                    <div className="person-name">林灿荣</div>
                    <Header/>
                    <HistoryList/>
                </div>
            )
        }
    });

    r.render(
			<Content/>,
			document.getElementById('root')
	)

})( liefeng, React)
